<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>编辑用户</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.bundle.min.js"></script>
    <style>
        body { margin: 0; padding: 0; background: #f5f6fa; display: flex; min-height: 100vh; }
        .main-wrapper {
            display: flex;
            width: 100%;
        }
        .sidebar {
            width: 300px; /* Adjust sidebar width as needed */
            background-color: #fff; /* White background for sidebar */
            padding: 20px;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            flex-shrink: 0; /* Prevent sidebar from shrinking */
        }
        .sidebar ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .sidebar ul li {
            margin-bottom: 10px;
        }
        .sidebar ul li a {
            display: block;
            padding: 10px 15px;
            color: #333;
            text-decoration: none;
            border-radius: 4px;
        }
        .sidebar ul li a:hover {
            background-color: #e9ecef;
        }
        .sidebar ul li a.active {
            background-color: #007bff; /* Active color for admin links */
            color: #fff;
        }
        .main-content {
            flex-grow: 1; /* Allow main content to take up remaining space */
            padding: 20px;
            background-color: #f5f6fa; /* Light grey background for main content area */
        }
        .info-card {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .form-group label {
            font-weight: bold;
        }
        .form-row {
            display: flex;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
        }
        .form-row > .col, .form-row > [class*="col-"] {
            padding-right: 15px;
            padding-left: 15px;
        }
        .form-group.row {
            margin-left: 0; margin-right: 0;
        }
         .avatar-upload-area {
            width: 100px;
            height: 100px;
            border: 2px dashed #ccc;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 2rem;
            color: #ccc;
            margin-bottom: 10px;
        }
        .avatar-preview img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 8px;
        }
    </style>
</head>
<body>

<div class="main-wrapper">
    <div class="sidebar">
        <h3>医院病例管理系统</h3>
        <ul>
             <li><a href="/adminUserList">用户管理</a></li><%-- Adjust active link later --%>
            <%-- TODO: Add links for other admin features like 病例管理, etc. --%>
            <li><a href="/adminPersonalCenter">个人信息管理</a></li>
        </ul>
    </div>
    <div class="main-content">
        <div class="info-card">
            <h2>编辑用户信息</h2>
            <form id="editUserForm">
                 <input type="hidden" id="userId">
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="avatar">头像</label>
                        <div>
                            <%-- Placeholder for avatar image or upload area --%>
                            <div id="avatarPreview" class="avatar-preview" style="display: none;">
                                <img src="" alt="Avatar">
                            </div>
                            <div id="avatarUpload" class="avatar-upload-area">
                                +
                            </div>
                            <small class="form-text text-muted">点击上传头像</small>
                        </div>
                    </div>
                     <div class="form-group col-md-6">
                        <input type="hidden" id="avatarPath">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="username">账号</label>
                        <input type="text" class="form-control" id="username" readonly> <%-- Username usually not editable --%>
                    </div>
                     <div class="form-group col-md-6">
                        <label for="userRole">角色</label>
                        <select class="form-control" id="userRole">
                            <option value="0">患者</option>
                            <option value="1">管理员</option>
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="nickname">昵称</label>
                        <input type="text" class="form-control" id="nickname" >
                    </div>
                    <div class="form-group col-md-6">
                        <label for="gender">性别</label>
                        <select class="form-control" id="gender">
                            <option value="0">男</option>
                            <option value="1">女</option>
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="age">年龄</label>
                        <input type="text" class="form-control" id="age" >
                    </div>
                     <div class="form-group col-md-6">
                        <label for="phone">手机号码</label>
                        <input type="text" class="form-control" id="phone" >
                    </div>
                </div>

                <div class="form-row">
                     <div class="form-group col-md-6">
                        <label for="email">邮箱</label>
                        <input type="text" class="form-control" id="email" >
                    </div>
                    <%-- Password is not usually edited directly here for security --%>
                    <%-- <div class="form-group col-md-6">
                         <label for="password">密码</label>
                         <input type="password" class="form-control" id="password" >
                     </div> --%>
                </div>

                <button type="button" class="btn btn-primary" id="saveUserButton" style="margin-top: 15px;">保存</button>
                 <button type="button" class="btn btn-secondary" id="cancelButton" style="margin-top: 15px;">取消</button>
            </form>
        </div>
    </div>
</div>

<script>
    $(function(){
        // Get user ID from URL
        const urlParams = new URLSearchParams(window.location.search);
        const userId = urlParams.get('id');
        $('#userId').val(userId); // 将用户ID存入隐藏字段

        // TODO: Load user data by ID
        function loadUserData(id) {
            // AJAX call to backend to get user data
             console.log('Loading user data for ID:', id);
            $.ajax({
                url: '/admin/users/' + id, // 调用根据ID获取用户信息的后端接口
                type: 'GET',
                success: function(res) {
                    if (res.code === 0 && res.data) {
                        const user = res.data;
                        // Fill form fields with data
                        $('#username').val(user.username);
                        $('#userRole').val(user.role);
                        $('#nickname').val(user.nickname || '');
                        $('#gender').val(user.gender);
                        $('#age').val(user.age || '');
                        $('#phone').val(user.phone || '');
                        $('#email').val(user.email || '');
                        $('#avatarPath').val(user.avatar || '');

                        // 显示头像
                        if (user.avatar) {
                            $('#avatarPreview img').attr('src', user.avatar);
                            $('#avatarPreview').show();
                            $('#avatarUpload').hide();
                             $('#avatarUpload').next('small').hide();
                        } else {
                            $('#avatarPreview').hide();
                            $('#avatarUpload').show();
                             $('#avatarUpload').next('small').show();
                        }

                    } else {
                        alert('获取用户信息失败: ' + (res.message || ''));
                        // 可以选择跳转回用户列表页
                        // window.location.href = '/adminUserList';
                    }
                },
                error: function() {
                    alert('获取用户信息失败，请稍后重试。');
                    // 可以选择跳转回用户列表页
                    // window.location.href = '/adminUserList';
                }
            });
        }

        // TODO: Save user data
        $('#saveUserButton').click(function(){
            // Collect data from form
            const userData = {
                 id: userId,
                nickname: $('#nickname').val(),
                phone: $('#phone').val(),
                email: $('#email').val(),
                age: $('#age').val(),
                gender: $('#gender').val(),
                role: $('#userRole').val(), // Include role
                avatar: $('#avatarPath').val()
            };

            // AJAX call to backend to save data
             console.log('Saving user data:', userData);
            $.ajax({
                url: '/admin/users/update', // 调用更新用户信息的后端接口
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(userData),
                success: function(res) {
                    if (res.code === 0) {
                        alert('用户信息更新成功');
                        // 可以选择跳转回用户列表页或者留在当前页
                        // window.location.href = '/adminUserList';
                    } else {
                        alert('用户信息更新失败: ' + (res.message || ''));
                    }
                },
                error: function() {
                    alert('用户信息更新失败，请稍后重试。');
                }
            });
        });

         // Handle cancel button click
        $('#cancelButton').click(function(){
            // Redirect back to user list page
            window.location.href = '/adminUserList';
        });

        // TODO: Implement avatar upload logic similar to personalCenter.jsp
         // 添加隐藏的文件输入框
         $('.form-group.col-md-6').has('label[for="avatar"]').append('<input type="file" id="avatarFileInput" accept="image/*" style="display: none;">');

         // 处理头像上传
         $('#avatarFileInput').on('change', function(e) {
             var file = e.target.files[0];
             if (file) {
                 var formData = new FormData();
                 formData.append('file', file);

                 $.ajax({
                     url: '/user/upload/avatar', // 使用用户头像上传接口
                     type: 'POST',
                     data: formData,
                     processData: false,
                     contentType: false,
                     success: function(res) {
                         if(res.code === 0) {
                             $('#avatarPreview img').attr('src', res.data);
                             $('#avatarPreview').show();
                             $('#avatarPath').val(res.data);
                         } else {
                             alert(res.message || '头像上传失败');
                         }
                     },
                     error: function() {
                         alert('头像上传失败，请稍后重试');
                     }
                 });
             }
         });

         // 触发文件选择
         $('#avatarUpload, #avatarPreview').click(function() {
              $('#avatarFileInput').click();
         });


        // Load user data on page load
         if (userId) {
            loadUserData(userId);
         }
    });
</script>
</body>
</html> 